<template>
	<view>
		<!-- 主体 -->
		<view class="page page-bottom-bar after-sale">
			<!-- 订单信息 -->
			<view class="goods font14 box-shadow flex-row-start">
				<view class="left bg-cover" :style="{backgroundImage: 'url(' + goodsobj.logo + ')'}"></view>
				<view class="right flex-1 flex-column-between">
					<view class="font14">{{goodsobj.goods_name}}</view>
					<view class="font12 font-969696 flex-row-between">
						<view>规格：{{goodsobj.spec_type==10?'默认':goodsobj.goods_attr}}</view>
						<view>x{{goodsobj.total_num}}</view>
					</view>
				</view>
			</view>
			<!-- 售后信息 -->
			<view class="filter-box box-shadow">
				<view class="filter-bar flex-row-start">
					<block v-for="(item, index) in filterBar" :key="index">
						<view class="item" :class="{'active' : filterCurrent == item.id}" @click="filterList(item.id)">
							{{item.title}}
						</view>
					</block>
				</view>
				<view class="font14">申请原因:</view>
				<textarea placeholder="请输入申请原因" placeholder-style="color:#c8c8c8;" @input="Ontextarea"
					:value="refund_reason"></textarea>
				<view class="font14 flex-row-between">
					<view>退款金额</view>
					<view class="font-assist">￥{{goodsobj.goods_price}}</view>
				</view>
			</view>
			<!-- 上传凭证 -->
			<view class="upload box-shadow">
				<view class="font14">上传凭证</view>
				<Comupload ref="Comupload" :options="uploadObj" @callback="chooseImg" @toggle="onToggle"></Comupload>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="fix-bottom-btn flex-row-center" v-if="isShow">
			<view class="btn flex-row-center font-ffffff font15" @click="OnfeedBack">提交</view>
		</view>
	</view>
</template>

<script>
	import Comupload from '@/components/j-Comupload/index.vue';
	export default {
		components: {
			Comupload
		},
		data() {
			return {
				isShow:true,
				code: '', //订单code
				dataobj: {}, //总数据
				goodsobj: {}, //商品数据
				refund_reason: '', //退款原因
				imgFullUrl: this.$Config.http_static, //图片地址
				filterBar: [{
					id: 11,
					title: '退货退款'
				}],
				filterCurrent: 11, // 高亮的id
				uploadObj: {
					max: 6, // 最多上传多少图片
					height: 160, // 图片显示的高
					width: 160, // 图片显示的宽
					radius: 6, // 图片圆角
					top: 0, // 图片头部距离
					bottom: 20, // 图片底部距离
					right: 40, // 图片右边距离
					num: 3, // 一行显示几张图片
					slot: false // 是否自定义上传样式
				},
				uploadList: [], // 图片组
			}
		},
		onLoad: function(options) {
			let query = {}
			if (this.$Route.query.scene) {
				query = this.$base.OnWxoptions(this.$Route.query.scene)
			}else{
				query = options
			}
			this.code = query.code
			this.OnDetails()
		},
		methods: {
			onToggle (e) {
				this.isShow = !e.show
			},
			// 商品详情
			OnDetails() {
				this.$Http({
					url: 'detailsOrder',
					token: true,
					type: 'POST',
					data: {
						order_code: this.code
					},
				}).then(res => {
					if (res.code == 1) {
						res.data.order_goods.logo = this.imgFullUrl + res.data.order_goods.logo
						this.dataobj = res.data
						this.goodsobj = res.data.order_goods

					}
				});
			},
			//退款原因
			Ontextarea(e) {
				this.refund_reason = e.detail.value
			},
			// 筛选列表
			filterList(id) {
				this.filterCurrent = id
			},
			// 上传图片组
			chooseImg(e) {
				console.log(e, '图片组')
				this.uploadList = e
			},
			//提交
			OnfeedBack() {
				let that = this
				if (this.uploadList.length <= 0) {
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: '请上传图片'
					});
					return
				}
				if (this.refund_reason == '') {
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: '请输入退款原因'
					});
					return
				}
				let data = {
					refund_imgs: '',
					refund_reason: this.refund_reason,
					order_id: this.dataobj.id
				}
				this.uploadList.forEach(item => {
					data.refund_imgs = data.refund_imgs + item + ','
				})
				data.refund_imgs = data.refund_imgs.substr(0, data.refund_imgs.length - 1);
				this.$Http({
					url: 'addAftermarket',
					data: data,
					token:true,
					type:'POST',
				}).then(res => {
					if (res.code == 1) {
						uni.showModal({
							title: '操作提示',
							content: '申请成功~',
							confirmText: '我知道了',
							confirmColor: '#ff3c37',
							showCancel: false,
							success(res) {
								if (res.confirm) {
									that.$Router.replace('/pages/group/orderList')
								}
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							duration: 2000,
							title: res.msg
						});
					}
				});
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
